<template>
  <div>
    <div class="head">
      <a @click="$router.push({path: '/'})" class="return"></a>
      <span v-show="marketId == 1">ATM/AIDT</span>
      <span v-show="marketId == 2">BTC/AIDT</span>
      <span v-show="marketId == 3">ETH/AIDT</span>
      <span v-show="marketId == 4">EOS/AIDT</span>
      <span v-show="marketId == 5">LTC/AIDT</span>
      <span v-show="marketId == 6">XRP/AIDT</span>
    </div>
    <div class="overlay nav-btm">
      <div class="overlay-content scrolling">
        <div style="padding:0 10px;">
          <div class="weui-flex">
            <div class="weui-flex__item">
                <div class="title">
                  <span class="rise2" v-show="list.percentChange >= 0">{{list.last}}</span>
                  <span class="fall2" v-show="list.percentChange < 0">{{list.last}}</span>
                </div>
                <div v-show="list.percentChange >= 0"><span style="color:#7d85a1;">≈{{list.cny}}CNY</span> <span class="rise2">+{{list.percentChange}}%</span></div>
                <div v-show="list.percentChange < 0"><span style="color:#7d85a1;">≈{{list.cny}}CNY</span> <span class="fall2">{{list.percentChange}}%</span></div>
            </div>
            <div class="v">
                <div><span>高</span><p>{{list.high24hr}}</p></div>
                <div><span>低</span><p>{{list.low24hr}}</p></div>
                <div><span>24H量</span><p>{{list.baseVolume}}万</p></div>
            </div>
          </div>
        </div>
        
        <div style="padding:10px 0;">
            <!--K线-->
            <div class="KLine">
              <K-line></K-line>
            </div>
        </div>
        

      </div>
    </div>
    <div class="weui-flex weui-fixed-btm">
        <div class="weui-flex__item">
            <van-button slot="button" size="normal" type="info" to="/Transaction?typeId=0">买入</van-button>
        </div>
        <div class="weui-flex__item">
            <van-button slot="button" size="normal" type="danger" to="/Transaction?typeId=1">卖出</van-button>
        </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { base, change, home } from "./../utils/api";
import KLine from '@/components/KLine/KLine';
let _this;
export default {
  components:{
    KLine
  },
  data() {
    return {
      marketId: this.$route.query.marketId,
      list:[],
      type:'',
      timer:null
    };
  },
  beforeCreate() {
			_this = this;
	},
  beforeMount(){
    if(this.marketId == 1){
      this.type = 'platform_AIDT'
    }else if(this.marketId == 2){
      this.type = 'btc_AIDT'
    }else if(this.marketId == 3){
      this.type = 'eth_AIDT'
    }else if(this.marketId == 4){
      this.type = 'eos_AIDT'
    }else if(this.marketId == 5){
      this.type = 'ltc_AIDT'
    }else if(this.marketId == 6){
      this.type = 'xrp_AIDT'
    }
  },
  mounted() {
    this.ticker();
    this.timer = setInterval(function(){
      _this.ticker();
    }, 5000)
  },
  methods: {
    ticker(){
      home.getKLine({
        'coinType':this.type,
      }).then(res => {
        if(res.code == 200){
          this.list = res.data
        }
      })
    }
  },
  destroyed(){
		clearInterval(this.timer);
	}
};
</script>

<style lang="less" scoped>
.title{
    font-size: 26px;
    color:#f56f6f;
}
.k{
    font-size: 12px;
    color:#9a9ca6;
    span{
        color:#fff;
        padding-left: 10px;
    }
}
.weui-fixed-btm{
    .weui-flex__item{
        padding:2px 10px;
    }
}
.rise2{
    color:#30c694 !important;
}
.fall2{
    color:#fa4a61 !important;
}
.v{
  font-size:14px;
  color:#7d85a1;
  div{
    position: relative;
    span{
      position: absolute;
      left: 0;
      top: 0;
    }
    p{
      color:#fff;
      text-align: right;
      padding-left: 60px;
    }
  }
  
}
</style>